<div <div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>JavaScript <span class="color_h1">调试</span>
</h1>
<hr>
<p class="intro">在编写 JavaScript 时，如果没有调试工具将是一件很痛苦的事情。</p>
<hr>
<h2>JavaScript 调试</h2>
<p>没有调试工具是很难去编写 JavaScript 程序的。</p>
<p>你的代码可能包含语法错误，逻辑错误，如果没有调试工具，这些错误比较难于发现。</p>
<p>通常，如果 JavaScript 出现错误，是不会有提示信息，这样你就无法找到代码错误的位置。</p>
<p>
</p>
<table class="lamp"><tbody><tr>
<th style="width:34px">
<img decoding="async" src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
</th>
<td>
通常，你在编写一个新的 JavaScript 代码过程中都会发生错误。
</td>
</tr></tbody></table>
<hr>
<h2>JavaScript 调试工具</h2>
<p>在程序代码中寻找错误叫做代码调试。</p>
<p>调试很难，但幸运的是，很多浏览器都内置了调试工具。</p>
<p>内置的调试工具可以开始或关闭，严重的错误信息会发送给用户。</p>
<p>有了调试工具，我们就可以设置断点 (代码停止执行的位置), 且可以在代码执行时检测变量。</p>
<p>浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 "Console" 。<br></p>
<hr>
<h2>console.log() 方法</h2>
<p>如果浏览器支持调试，你可以使用 console.log() 方法在调试窗口上打印 JavaScript 值：</p>

<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-identifier">a</span><span class="hl-code"> = </span><span class="hl-number">5</span><span class="hl-code">;
</span><span class="hl-identifier">b</span><span class="hl-code"> = </span><span class="hl-number">6</span><span class="hl-code">;
</span><span class="hl-identifier">c</span><span class="hl-code"> = </span><span class="hl-identifier">a</span><span class="hl-code"> + </span><span class="hl-identifier">b</span><span class="hl-code">;
</span><span class="hl-identifier">console</span><span class="hl-code">.</span><span class="hl-identifier">log</span><span class="hl-brackets">(</span><span class="hl-identifier">c</span><span class="hl-brackets">)</span><span class="hl-code">;</span></div>
<button class="copy-code-button" type="button" data-clipboard-text="a = 5;
b = 6;
c = a + b;
console.log(c);"></button></div>
<br><a class="tryitbtn" href="/try/try.php?filename=tryjs_console" target="_blank">尝试一下 »</a>
</div>
<br><hr>
<h2>设置断点</h2>
<p>在调试窗口中，你可以设置 JavaScript 代码的断点。</p>
<p>在每个断点上，都会停止执行 JavaScript 代码，以便于我们检查
JavaScript 变量的值。</p>
<p>在检查完毕后，可以重新执行代码（如播放按钮）。</p>

<hr>
<h2>debugger 关键字</h2>
<p><strong>debugger</strong> 关键字用于停止执行 JavaScript，并调用调试函数。</p>
<p>这个关键字与在调试工具中设置断点的效果是一样的。</p>
<p>如果没有调试可用，debugger 语句将无法工作。</p>
<p>开启 debugger ，代码在第三行前停止执行。</p>

<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-reserved">var</span><span class="hl-code"> </span><span class="hl-identifier">x</span><span class="hl-code"> = </span><span class="hl-number">15</span><span class="hl-code"> * </span><span class="hl-number">5</span><span class="hl-code">;
</span><span class="hl-reserved">debugger</span><span class="hl-code">;
</span><span class="hl-builtin">document</span><span class="hl-code">.</span><span class="hl-identifier">getElementbyId</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">demo</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">.</span><span class="hl-identifier">innerHTML</span><span class="hl-code"> = </span><span class="hl-identifier">x</span><span class="hl-code">;</span></div>

<button class="copy-code-button" type="button" data-clipboard-text="var x = 15 * 5;
debugger;
document.getElementbyId(&quot;demo&quot;).innerHTML = x;"></button></div>
<br><a class="tryitbtn" href="/try/try.php?filename=tryjs_debugger" target="_blank">尝试一下 »</a>
</div>
<br><hr>
<h2>主要浏览器的调试工具</h2>
<p>通常，浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 "Console" 。</p>
<p>各浏览器的步骤如下:</p>
<h2>Chrome 浏览器</h2>
<ul>
<li>打开浏览器。</li>
 <li>在菜单中选择 <strong>"更多工具"</strong>。</li>
 <li>在 <strong>"更多工具"</strong> 中选择 <strong>"开发者工具"</strong>。</li>
 <li>最后，选择 Console。</li>
</ul>
<p><img decoding="async" src="//www.runoob.com/wp-content/uploads/2014/10/chrome1.png"></p>
<p>
或者你可以右击鼠标选择 <strong>"检查"</strong>，如下图：</p>
<p><img decoding="async" src="//www.runoob.com/wp-content/uploads/2014/10/chrome2.png"></p>
<h2>Firefox 浏览器</h2>
<ul>
<li>打开浏览器。</li>
 <li>右击鼠标，选择 <strong>"查看元素"</strong>。</li>
 
</ul>
<p><img decoding="async" src="//www.runoob.com/wp-content/uploads/2014/10/firebug.png"></p>

<h2>Safari</h2>
<ul>
<li>打开浏览器。</li>
 <li>右击鼠标，选择检查元素。</li>
 <li>在底部弹出的窗口中选择"控制台"。</li>
</ul>
<p><img decoding="async" src="//www.runoob.com/wp-content/uploads/2014/10/safari.png"></p>

<h2>Internet Explorer 浏览器。</h2>
<ul>
<li>打开浏览器。</li>
 <li>在菜单中选择工具。</li>
 <li>在工具中选择开发者工具。</li>
 <li>最后，选择 Console。</li>
</ul>
<p><img decoding="async" src="/wp-content/uploads/2014/10/6fff3e1agw1fbmoikj240j208b09iwf4.jpg"></p>
<h2>Opera</h2>
<ul>
<li>打开浏览器。</li>
<li>点击左上角，选择<strong>"开发者工具"</strong>,选择<strong>"WEB检查器"</strong>。</li>
</ul>
<p><img decoding="async" src="/wp-content/uploads/2014/10/opera1.png"></p>

<p>更简单的方式是：右击鼠标，选择<strong>"查看元素"</strong></p>
<p><img decoding="async" src="/wp-content/uploads/2014/10/opera2.png"></p>			<!-- 其他扩展 -->
						
			</div>
			
		</div>class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>JavaScript 声明提升</h1>

<p>JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。 </p>
<p>JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。</p>
<p>以下两个实例将获得相同的结果：</p>
<div class="example">
<h3>实例 1</h3>
<div class="example_code"><span style="color:black">
x = <span style="color:red">5</span>; <span style="color:green">// 变量 x 设置为 5<br></span><span style="color:red">
</span><br>
elem = document.getElementById(<span style="color:brown">"demo"</span>); <span style="color:green">// 查找元素 <br></span>
elem.innerHTML = x;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:red">
</span><span style="color:green">// 在元素中显示 x<br></span><br><span style="color:mediumblue">var</span> x; <span style="color:green">// 声明 x
</span></span><button class="copy-code-button" type="button" data-clipboard-text="x = 5; // 变量 x 设置为 5

elem = document.getElementById(&quot;demo&quot;); // 查找元素 
elem.innerHTML = x;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
// 在元素中显示 xvar x; // 声明 x"></button></div>
<br>
	<a target="_blank" href="/try/try.php?filename=tryjs_hoisting1" class="tryitbtn" rel="noopener">尝试一下 »</a>

</div>
<br>
<div class="example">
<h3>实例 2</h3>
<div class="example_code"><span style="color:black">
<span style="color:mediumblue">var</span> x; <span style="color:green">// 声明 x<br></span>
x = <span style="color:red">5</span>; <span style="color:green">// 变量 x 设置为 5<br></span><br>
elem = document.getElementById(<span style="color:brown">"demo"</span>); <span style="color:green">// 查找元素 <br></span>elem.innerHTML = x;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:red">
</span><span style="color:green">// 在元素中显示 x<br></span>
</span><button class="copy-code-button" type="button" data-clipboard-text="var x; // 声明 x
x = 5; // 变量 x 设置为 5
elem = document.getElementById(&quot;demo&quot;); // 查找元素 elem.innerHTML = x;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
// 在元素中显示 x"></button></div>
<br>
	<a target="_blank" href="/try/try.php?filename=tryjs_hoisting2" class="tryitbtn" rel="noopener">尝试一下 »</a>

</div>

<p>要理解以上实例就需要理解 "hoisting(声明提升)"。</p>
<p>声明提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。</p>
<hr>
<h2>JavaScript 初始化不会提升</h2>
<p>JavaScript 只有声明的变量会提升，初始化的不会。</p>
<p>以下两个实例结果结果不相同：</p>

<div class="example">
<h3>实例 1</h3>
<div class="example_code"><span style="color:black">
<span style="color:mediumblue">var</span> x = <span style="color:red">5</span>; <span style="color:green">// 初始化 x<br></span><span style="color:mediumblue">var</span> y = <span style="color:red">7</span>; <span style="color:green">// 初始化 y<br></span><br>elem = document.getElementById(<span style="color:brown">"demo"</span>); <span style="color:green">// 查找元素 <br></span>
elem.innerHTML = x + <span style="color:brown">" "</span> + y;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:green">// 显示 x 和 y
</span></span><button class="copy-code-button" type="button" data-clipboard-text="var x = 5; // 初始化 xvar y = 7; // 初始化 yelem = document.getElementById(&quot;demo&quot;); // 查找元素 
elem.innerHTML = x + &quot; &quot; + y;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 显示 x 和 y"></button></div>
<br>
	<a target="_blank" href="/try/try.php?filename=tryjs_hoisting4" class="tryitbtn" rel="noopener">尝试一下 »</a>
</div>
<br>
<div class="example">
<h3>实例 2</h3>
<div class="example_code"><span style="color:black">
<span style="color:mediumblue">var</span> x = <span style="color:red">5</span>; <span style="color:green">// 初始化 x<br></span><span style="color:red">
</span><br>
elem = document.getElementById(<span style="color:brown">"demo"</span>); <span style="color:green">// 查找元素 <br></span>
elem.innerHTML = x + <span style="color:brown">" "</span> + y;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:green">// 显示 x 和 y<br></span><span style="color:red">
</span><br>
<span style="color:mediumblue">var</span> y = <span style="color:red">7</span>; <span style="color:green">// 初始化 y
</span></span><button class="copy-code-button" type="button" data-clipboard-text="var x = 5; // 初始化 x

elem = document.getElementById(&quot;demo&quot;); // 查找元素 
elem.innerHTML = x + &quot; &quot; + y;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 显示 x 和 y

var y = 7; // 初始化 y"></button></div>
<br>
	<a target="_blank" href="/try/try.php?filename=tryjs_hoisting3" class="tryitbtn" rel="noopener">尝试一下 »</a>
</div>

<p>实例 2 的 y 输出了 <b>undefined</b>，这是因为变量声明 (var y) 提升了，但是初始化(y = 7) 并不会提升，所以 y 变量是一个未定义的变量。 </p>
<p>实例 2 类似以下代码:</p>
<pre class="prettyprint prettyprinted" style=""><span class="kwd">var</span><span class="pln"> x </span><span class="pun">=</span><span class="pln"> </span><span class="lit">5</span><span class="pun">;</span><span class="pln"> </span><span class="com">// 初始化 x</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> y</span><span class="pun">;</span><span class="pln">     </span><span class="com">// 声明 y</span><span class="pln">

elem </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"demo"</span><span class="pun">);</span><span class="pln"> </span><span class="com">// 查找元素</span><span class="pln">
elem</span><span class="pun">.</span><span class="pln">innerHTML </span><span class="pun">=</span><span class="pln"> x </span><span class="pun">+</span><span class="pln"> </span><span class="str">" "</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> y</span><span class="pun">;</span><span class="pln">           </span><span class="com">// 显示 x 和 y</span><span class="pln">

y </span><span class="pun">=</span><span class="pln"> </span><span class="lit">7</span><span class="pun">;</span><span class="pln">    </span><span class="com">// 设置 y 为 7</span><button class="copy-code-button" type="button" data-clipboard-text="var x = 5; // 初始化 x
var y;     // 声明 y

elem = document.getElementById(&quot;demo&quot;); // 查找元素
elem.innerHTML = x + &quot; &quot; + y;           // 显示 x 和 y

y = 7;    // 设置 y 为 7
"></button></pre>
<hr>
<h2>在头部声明你的变量</h2>
<p>对于大多数程序员来说并不知道 JavaScript 声明提升。</p>
<p>
如果程序员不能很好的理解声明提升，他们写的程序就容易出现一些问题。</p>
<p>为了避免这些问题，通常我们在每个作用域开始前声明这些变量，这也是正常的 JavaScript 解析步骤，易于我们理解。</p>
<table class="lamp"><tbody><tr>
<th style="width:34px"><img decoding="async" src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px"></th>
<td>JavaScript 严格模式(strict mode)不允许使用未声明的变量。<br>在下一个章节中我们将会学习到 <strong>"严格模式(strict mode)"</strong> 。</td>
</tr></tbody></table>			<!-- 其他扩展 -->
						
			</div>
			
		</div>